 <template>
<el-dialog
      v-model="showDialogVisible"
      title="变更记录详情"
      width="60%"
      :before-close="closeDialog"
  >
<div class="page-container">
    <!-- 正文区 -->
    <div class="page-info">
      <!-- 指标基本情况 -->
      <div class="headline">基本信息</div>
      <div class="content">
        <div class="items">
          <div class="label">版本号</div>
          <div class="value">{{props.data['versionNo']}}</div>
        </div>
        <div class="items">
          <div class="label">所属项目</div>
          <div class="value"> {{ tagConfigFind('projectId', props.data['projectId'])['label'] }}</div>
        </div>
        <div class="items">
          <div class="label">更新时间</div>
          <div class="value">{{props.data['createTime']}}</div>
        </div>
        <div class="items">
          <div class="label">所属服务</div>
          <div class="value">{{ tagConfigFind('serviceId', props.data['serviceId'])['label'] }}</div>
        </div>
        <div class="items">
          <div class="label">开发人员</div>
          <div class="value">{{ tagConfigFind('workerId', props.data['workerId'])['label'] }}</div>
        </div>
        <div class="items">
          <div class="label">所属分支</div>
          <div class="value">{{ tagConfigFind('branchId', props.data['branchId'])['label'] }}</div>
        </div>
        <!-- <div class="items">
          <div class="label">提报错误单据</div>
          <div class="value tl-color-blue" @click="goDetails('123')">
            GDFY20210301110616
          </div>
        </div> -->
      </div>
      <div class="headline">更新内容</div>
      <div class="content">
        <div v-html="props.data['updateExplain']"></div>
      </div>
      <div class="headline">更新脚本</div>
      <div class="content">
        <!-- {{props.data['updateScript']}} -->
        <div v-html="props.data['updateScript']" class="formatted-text"></div>
      </div>
      <!-- <div class="headline">额外说明</div>
      <div class="content">
        {{props.data['other']}}
      </div> -->
    </div>
  </div>
  </el-dialog>
</template> 


<script setup>
import {onMounted, ref} from "vue";
import {storeToRefs} from "pinia";
import useStore from "@/store";

const {common} = useStore()

// 添加弹窗是否显示
const {showDialogVisible} = storeToRefs(common)
const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: {}
  },//显示表单数据
  fieldConfig: {
    type: Array,
    required: true,
    default: []
  },// 显示项配置
  otherFieldConfig: {
    type: Array,
    required: true,
    default: []
  },// 其他信息补充显示自动配置
  otherConfig: {
    type: Object,
    required: true,
    default: {
      'show': false // 是否显示其他信息补充
    }
  },// 其他信息补充配置
  otherData: {
    type: Object,
    required: true,
    default: []
  },// 其他信息补充列表数据
  tagConfig: {
    type: Object,
    required: false,
    default: {}
  }// tag标签显示配置
})
// 详情配置项
const fieldConfig = ref([])
// 关闭弹窗
const closeDialog = () => {
  common.changeShowDialogVisible(false)
}
// 自定义标签正确显示内容
const tagConfigFind = (item, value) => {
  // console.log(item, value)
  // nextTick(() => {
  if (value) {
    for (let i in props.tagConfig[item]) {
      // console.log(props.tagConfig[item][i])
      if (value === props.tagConfig[item][i]['value']) {
        // console.log({'label': props.tagConfig[item][i]['label'], 'type': props.tagConfig[item][i]['type']})
        console.log("type",props.tagConfig[item][i]['type'])
        return {'label': props.tagConfig[item][i]['label'], 'type': props.tagConfig[item][i]['type']}
      }
    }
  } else {
    return {'label': '', 'type': ''}
  }
}
onMounted(() => {
  // 生成配置项
  fieldConfig.value = props.fieldConfig.filter(item => {
    return item.is_info_show
  })
})
</script>

<style lang="scss" scoped>
.page-container {
  position: relative;
  .page-info {
    .title {
      font-size: 20px;
      color: #333;
      font-weight: bold;
      margin-bottom: 10px;
      position: relative;
      .tag {
        display: inline-block;
        line-height: 22px;
        padding: 0 8px;
        font-size: 12px;
        font-weight: 500;
        margin-left: 10px;
        border-radius: 4px;
        vertical-align: text-bottom;
      }
      .primary {
        background-color: #effbff;
        color: #249ff7;
      }
      .warn {
        background-color: #fff3e2;
        color: #f79f24;
      }
      .close {
        position: absolute;
        right: 41px;
        top: 17px;
        width: 117px;
        height: 117px;
      }
    }
    .items {
      font-size: 14px;
      margin-bottom: 10px;
      .label {
        color: #999;
        &::after {
          content: "：";
        }
      }
      .value {
        max-width: 310px;
        word-break: break-word;
        color: #333;
      }
    }
    .headline {
      height: 36px;
      line-height: 36px;
      padding: 0 15px;
      font-size: 14px;
      font-weight: bold;
      color: #333;
      background-color: #f7f8f8;
    }

    .content {
      display: flex;
      flex-wrap: wrap;
      padding: 16px 85px 0 85px;
      .items {
        display: flex;
        flex: 0 0 50%;
        .label-two {
          flex: 0 0 135px;
          text-align: right;
        }
        .value-two {
          display: inline-block;
          vertical-align: top;
          padding-left: 16px;
        }
        .label {
          flex: 0 0 135px;
          text-align: right;
        }
        .value {
          display: inline-block;
          vertical-align: top;
          padding-left: 16px;
          .link {
            display: flex;
            width: 300px;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            &:last-child {
              margin-bottom: 0;
            }
            .name {
              color: #0b467f;
              font-size: 14px;
              max-width: 260px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .btn {
              color: #0b467f;
              font-size: 16px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
.tl-color-blue {
  cursor: pointer;
  color: #249ff7 !important;
}
.formatted-text {
  white-space: pre-line; /* 保留换行符 */
  word-wrap: break-word; /* 自动换行 */
}
</style>